<template>
	<view class="user-center">
		<view class="header-box">
			<view class="card-img-box">
				<image class="card-img" src="@/static/main-icon/user.png" mode="widthFix"></image>
			</view>
			<view>
				<view class="header-name">{{userInfo.mobile}}</view>
				<view class="header-btn">姓名：{{userInfo.name}}</view>
				<view class="header-btn">角色：管理员</view>
			</view>
		</view>
		<view class="main-box">
			<view class="setting-out">
				<view class="setting-item mt-bd" @click="openPopEvent">
					<view class="item-title">门店信息</view>
					<view><uni-icons color="#CCC" type="right" size="16"></uni-icons></view>
				</view>
				<view v-if="!userInfo.openid" class="setting-item mt-bd" @click="wxRole">
					<view class="item-title">绑定微信</view>
					<view><uni-icons color="#CCC" type="right" size="16"></uni-icons></view>
				</view>
				<view v-else class="setting-item mt-bd" @click="cancelRole">
					<view class="item-title">解绑微信</view>
					<view><uni-icons color="#CCC" type="right" size="16"></uni-icons></view>
				</view>
				<view class="setting-item mt-bd" @click="toFindPassword">
					<view class="item-title">修改密码</view>
					<view><uni-icons color="#CCC" type="right" size="16"></uni-icons></view>
				</view>
			</view>
			<view class="logout" @click="loginOutEvent">退出登录</view>
		</view>
		<addGroup ref="addGroupDom">
			<view class="store-box">
				<view class="store-title">我的门店</view>
				<scroll-view scroll-y="true" class="store-list">
					<view class="store-item" v-for="(item,index) in storeList" :key="index" @click="toStoreInfo(item)">
						<view class="store-item-text">{{item.name}}</view>
						<view class="store-item-icon">
							<uni-icons type="right" size="20"></uni-icons>
						</view>
					</view>
				</scroll-view>
			</view>
		</addGroup>
	</view>
</template>

<script>
	import addGroup from '@/components/add-group.vue'
	export default {
		components: {
			addGroup
		},
		data() {
			return {
				userInfo: {},
				storeList: [],
				appID: 'wxf58f3083ae59347f',
				redirectUri: 'https://www.hulele.net/store/#/pages/user-center/user-center',
				userCode: ''
			}
		},
		methods: {
			// 微信授权
			wxRole() {
				window.location.href =
					`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appID}&redirect_uri=${encodeURIComponent(this.redirectUri)}&scope=snsapi_userinfo&response_type=code#wechat_redirect`
			},
			// 解绑微信
			cancelRole() {
				uni.showModal({
					title: '提示',
					content: '是否确认解绑微信？',
					cancelText: '取消',
					cancelColor: '#666',
					confirmText: '确认',
					confirmColor: '##ff9600',
					success: res => {
						if (res.confirm) {
							this.$request({
								method: 'post',
								url: `/applet/store/shopEmployee/cancelBindWechat`,
								loading: true,
								isEncrypt: false
							}).then(res => {
								if (res.code === 200) {
									uni.showToast({
										title: '已解绑微信',
										duration: 3000,
										icon: 'none'
									})
									this.getUserData()
								} else {
									uni.showToast({
										title: res.msg,
										duration: 3000,
										icon: 'none'
									})
								}
							}).catch(err => {
								console.error('请求异常：', err)
							})
						}
					}
				})
			},
			openPopEvent() {
				this.$refs.addGroupDom.openPop()
			},
			// 门店信息
			toStoreInfo(item) {
				this.$refs.addGroupDom.closePop()
				uni.navigateTo({
					url: `/pages/store-info/store-info?shopId=${item.shopId}`
				})
			},
			// 修改密码
			toFindPassword() {
				uni.navigateTo({
					url: '/pages/change-password/change-password'
				})
			},
			// 获取用户信息
			getUserData() {
				this.$request({
					method: 'get',
					url: '/applet/store/shopEmployee/current',
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.userInfo = res.data
				}).catch(err => {
					console.error('请求异常：', err)
				})
			},
			// 获取门店列表
			getStoreList() {
				this.$request({
					method: 'get',
					url: '/applet/store/shop/list',
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.storeList = res.data
				}).catch(err => {
					console.error('请求异常：', err)
				})
			},
			// 退出登录
			loginOutEvent() {
				this.$request({
					method: 'post',
					url: '/applet/clear/shopEmployee/logout',
					loading: true,
					isEncrypt: false
				}).then(res => {
					uni.removeStorageSync('token')
					uni.removeStorageSync('clientId')
					uni.removeStorageSync('shopId')
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}).catch(err => {
					console.error('请求异常：', err)
				})
			},
			getUserCode() {
				const data = {
					code: this.userCode
				}
				this.$request({
					method: 'post',
					url: '/applet/store/shopEmployee/bindWechat',
					data,
					loading: false,
					isEncrypt: false
				}).then(res => {

				}).catch(err => {
					console.error('请求异常：', err)
				})
			}
		},
		onLoad() {
			let url = new URL(window.location.href)
			let code = url.searchParams.get('code')
			this.userCode = code || ''
			if (this.userCode) {
				this.getUserCode()
				this.getUserData()
			}
		},
		onShow() {
			this.getUserData()
			this.getStoreList()
		}
	}
</script>

<style lang="scss">
	.user-center {
		background-color: #EEEFF5;
		padding-top: 30rpx;
		box-sizing: border-box;

		.header-box {
			background-color: #ffd589;
			padding: 68rpx 30rpx 30rpx 44rpx;
			display: flex;
			width: 690rpx;
			height: 300rpx;
			box-sizing: border-box;
			margin: auto;
			border-radius: 20rpx;
		}

		.card-img-box {
			flex: 0 0 200rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.card-img {
				width: 120rpx;
			}
		}

		.header-name {
			font-weight: bold;
			font-size: 36rpx;
			color: #000000;
		}

		.header-account {
			font-size: 28rpx;
			color: #7B7B7B;
			margin-top: 26rpx;
		}

		.header-btn {
			font-size: 28rpx;
			color: #000000;
			margin-top: 30rpx;
		}

		.main-box {
			padding: 30rpx;
		}

		.mt-bd {
			border-top: 1px solid #EEE;
		}

		.setting-out {
			background-color: #FFF;
			border-radius: 10rpx;
			padding: 0 30rpx;
			margin-bottom: 30rpx;
			font-size: 28rpx;
		}

		.setting-header {
			align-items: center;
			padding: 0 !important;
		}

		.setting-item {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 0;

			.item-title {
				flex: 0 0 140rpx;
			}
		}

		.logout {
			width: 690rpx;
			height: 90rpx;
			background: #ffd589;
			border-radius: 45rpx;
			font-size: 30rpx;
			color: #000;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 30rpx auto;
		}

		.store-box {
			text-align: center;

			.store-title {
				font-weight: 600;
				font-size: 38rpx;
				color: #000;
				margin-bottom: 20rpx;
			}

			.store-list {
				min-height: 250rpx;
				max-height: 500rpx;
			}

			.store-item {
				padding: 20rpx 0;
				border-bottom: 1px solid #EEE;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.store-item-text {
					flex: 1;
					text-align: center;
					font-weight: bold;
					font-size: 32rpx;
				}

				.store-item-icon {
					flex: 0 0 40rpx;
					flex-shrink: 0;
					text-align: right;
				}
			}
		}
	}
</style>